<template>
	<view>
		<u-sticky offset-top="-90">
			<u-navbar back-text="返回" :title="roomDetail.productName"></u-navbar>
		</u-sticky>
		<view class="u-m-20 u-p-20" style="background-color: #FFFFFF;">
			<view class="datetime u-flex u-row-between">
				<view v-if="dateTime">
					<text>{{dateTime.begin.month}}月{{dateTime.begin.day}}日</text>
					<text class="u-p-l-10">{{dateTime.begin.week}}</text>
					<text class="u-p-10">
						<u-tag :text="roomDetail.payNum + '晚'" type="success"></u-tag>
					</text>
					<text>{{dateTime.end.month}}月{{dateTime.end.day}}日</text>
					<text class="u-p-l-10">{{dateTime.end.week}}</text>
				</view>
				<view style="color: #19be6b;">
					<text>房型详情 ></text>
				</view>
			</view>
			
			<view class="roomCate u-m-t-10">
				<view class="title">
					<text>{{roomDetail.sku}}</text>
				</view>
				<view class="u-m-t-10" style="font-size: 20rpx;">
					<text class="u-p-r-10">大床</text>
					<text class="u-p-r-10">无早餐</text>
					<text class="u-p-r-10">2人入住</text>
				</view>
			</view>
			
		</view>
		
		<!-- 入住信息 -->
		<view class="person-info u-m-20 u-p-20" style="background-color: #FFFFFF;">
			<view style="font-size: 30rpx; font-weight: 700;">
				入住信息
			</view>
			<u-form :rules="rules" :model="form" ref="uForm" style="background-color: #FFFFFF;">
				
				<u-form-item label="房间数量" label-width="150"><u-input disabled placeholder="1间(最多能住两人)" /></u-form-item>
				<u-form-item label="住客姓名" label-width="150"><u-input v-model="form.name" /></u-form-item>
				<u-form-item label="联系手机" label-width="150"><u-input v-model="form.phone" /></u-form-item>
				<!-- <u-form-item label="预计到店" label-width="150"><u-input /></u-form-item> -->
				
				<u-form-item label="结算方式" label-width="150">
					<u-radio-group v-model="radio">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
		</view>
		
		
		<view class="u-m-20 u-p-20 bg-main">
			<view class="u-flex u-row-between" >
				<view style="font-size: 30rpx; font-weight: 700;">
					在线支付
				</view>
				
				<view class="u-flex" style="font-weight: 700;">
					<view class="u-p-r-10">1间{{roomDetail.payNum}}晚</view>
					
					<view class="">共 <text style="color: red;">￥{{orderInfoVo.payFee}}</text></view>
				</view>
			</view>
			<view class="u-m-t-20" style="border-bottom: 1rpx #E3E3E3 solid;"></view>
			<view class="mingxi u-m-t-30">
				<view class="u-flex u-row-between" style="font-size: 30rpx; font-weight: 700;">
					<text>房费</text>
					<text>￥{{orderInfoVo.payFee}}</text>
				</view>
				<!-- 明细 -->
				<view>
					<view class="u-flex u-row-between u-m-t-10" v-for="i in roomDetail.payNum" :key="i">
						<view>
							<text>2021-11-23</text>
							<text class="u-p-l-10">无早餐</text>
						</view>
						<view>
							<text>1 x ￥{{roomDetail.price}}</text>
						</view>
					</view>
						
				</view>
			</view>
		</view>
		
		<view class="bottom-buy">
			<view class="bottom-content">
				<view class="price">
					<text class="dw">￥</text>
					<text class="nums">{{orderInfoVo.payFee}}</text>
				</view>
				
				<view class="buy-button" @click="submitOrder()">
					<text>提交订单</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {hotelPreOrderInfo, hotelCreateOrder} from '../../../api/hotel.js'
	export default {
		
		
		data() {
			return {
				form: {
					name: '',
					intro: '',
					phone: '', // 手机号
				},
				rules: {
					
				},
				radioList: [
					{
						name: '微信',
						disabled: false
					},
					{
						name: '余额',
						disabled: false
					}
				],
				preOrderNo: null,
				roomDetail: {},
				orderInfoVo: {},
				dateTime: null,
				weeks: ['周日','周一','周二', '周三', '周四', '周五', '周六'],
				radio: '',
			}
			
		},
		onLoad(options) {
			this.preOrderNo = options.preOrderNo
			this.getPreOrderInfo()
			
		},
		methods: {
			// 加载预下订单
			async getPreOrderInfo() {
				const res = await hotelPreOrderInfo(this.preOrderNo)
				this.roomDetail = res.data.orderInfoVo.orderDetailList[0] // 获取所选的房间信息
				this.orderInfoVo = res.data.orderInfoVo // 获取所选的房间信息
				
				let datetime = res.data.beginTime.replace(/-/g, "/")
				let bt = new Date(datetime)
				    datetime = res.data.endTime.replace(/-/g, "/")
				let et = new Date(datetime)
				
				this.dateTime = {
					begin: {
						month: bt.getMonth(),
						day: bt.getDate(),
						week: this.weeks[bt.getDay()]
					},
					end: {
						month: et.getMonth(),
						day: et.getDate(),
						week: this.weeks[et.getDay()]
					}
				}
				console.log(res)
			},
			// 提交订单
			async submitOrder() {
				const params = {
					phone: this.form.phone,
					name: this.form.name,
					shippingType: 2,
					preOrderNo: this.preOrderNo,
					payChannel: 'weixinh5',
					payType: this.radio == '微信'?'weixin':'yue',
					useIntegral: false,
					realName: this.form.name
				}
				const res = await hotelCreateOrder(params)
				console.log(res)
			}
		}
	}
</script>

<style>
page {
	height: 100%;
	background-color: $u-bg-color;
}
</style>
<style lang="scss" scoped>
	
	.bg-main {
		background-color: #FFFFFF;
	}
	
	.bottom-buy {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100rpx;
		width: 100%;
		// background-color: #007AFF;

		
		background-color: #FFFFFF;
		.bottom-content {
			margin: 0 50rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.price {
				color: #E65339;
				.dw {
					font-size:20rpx;
				}
				.nums {
					font-size: 40rpx;
				}
				
			}
			
			.buy-button {
				width: 35%;
				height: 80%;
				
				background-color: $u-type-success;
				
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					font-size: 40rpx;
					color: #FFFFFF;
					// font-weight: 700;
				}
			}
		}
		
	}
</style>